<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
    <style>
        .home{ padding: 0; }
        .top{padding: 50px 19px 78px;display: flex;justify-content: space-between;align-items: center;background: #FABB3E;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;}
        .input{font-size: 13px;width:75%;padding-left: 26px;background-color: #fff;border-radius: 24px;height: 36px;line-height: 36px;
          background-image: url('../image/search.png');background-size: 12px 12px;background-repeat: no-repeat;background-position: 10px 12px;}
          .input span{color: #666;}
        .adress{font-size: 15px;color: #fff}
        .banner{padding: 0 15px;position: relative;margin-top: -60px}
        .banner .banner-pos img{width: 100%;height:125px;}
        .hr{margin-top: 7px;width: 100%;height: 10px;background-color:  #F7F8FA;}
        .content{padding: 18px 15px 0}
        .content .tab{width: 100%;padding-bottom: 20px;}
        .content .tab span{padding-bottom: 10px;color: #939393;font-size: 15px}
        .content .tab span.hot{margin-right: 20px}
        .content .tab span.active{border-bottom: 2px solid #000;color: #000;font-size: 18px}
        .content .cow img{display: inline-block;width: 95px;height: 42px;background-color: #ccc;border-radius: 7px;}
        .content .cow img:last-child{margin-right: 0;}
        .list{width: 100%;padding-top: 25px;display: none}
        .list.active{display: block;}
        .list .wrap{display: flex;flex-direction: column;justify-content: space-around;padding-bottom: 28px}
        .list .wrap:last-child{padding-bottom: 15px}
        .list .wrap .item{display: flex;align-items: center;justify-content: space-between;}
        .list .wrap .item .title{font-size: 16px;color: #000;font-weight: 600;overflow: hidden;
text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
        .list .wrap .item .money{ color: #EB5758;flex-shrink:0}
        .list .wrap .item .money .redfont{font-size: 24px}
        .list .wrap .item.self{justify-content: flex-start;margin-bottom: 5px}
        .list .wrap .item.self span{padding: 3px 9px;color:  #8B8EA3;font-size: 11px;border-radius: 5px;background-color:  #E4E7F0;display: inline-block;}
        .list .wrap .item.self span.sex{margin-right: 10px}
        .list .wrap .item .target{color: #999}
        .list .wrap .item .type{color: #999;flex-shrink: 0}
        .swiper-pagination{position: static;}
        .swiper-pagination .swiper-pagination-bullet{width: 11px;height: 4px;border-radius: 4px;background-color: #E8E8E8;opacity: 1;margin: 0 4px}
        .swiper-pagination .swiper-pagination-bullet-active{background-color: #FFAC00;}
        .cow img{width: 95px;height: 42px;}
    </style>
</head>
<body>
    <div class="home">
      <div class="top">
         <div type="text"  class="input" ><span>请输入您要搜索的内容</span></div>
         <span class="adress">中国</span>
      </div>
      <div class="banner" >
        <div class="swiper-container" id="banner">
          <div class="banner-pos swiper-wrapper" id="bannerImg">
            <img src=""  class="swiper-slide">
            <img src=""  class="swiper-slide">
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="hr"></div>
      <div class="content">
        <div class="tab">
          <span class="hot active" onclick="tagBtn( this );">热门</span>
          <span class="new" onclick="tagBtn( this );">最新</span>
        </div>
        <div class="cow swiper-container" id="cow">
          <div class="swiper-wrapper" >
              <img src="../image/index1.png"  class="swiper-slide" id="index1">
              <img src="../image/index2.png"  class="swiper-slide" id="index2">
              <img src="../image/index3.png"  class="swiper-slide" id="index3">
              <img src="../image/index4.png"  class="swiper-slide" id="index4">
          </div>

        </div>
        <div class="list active" id="hot">


          <!-- <div class="wrap">
            <div class="item">
              <div class="title">全新网络在线高薪兼职，简单立结！</div>
              <div class="money"><span class="redfont">800 </span>元/天</div>
            </div>
            <div class="item self">
              <span class="sex">男女不限</span>
              <span>长期</span>
            </div>
            <div class="item">
              <div class="target">南京主流艺术培训有限公司</div>
              <div class="type">日结</div>
            </div>
          </div> -->

        </div>
        <div class="list" id="new">


        </div>
      </div>

    </div>
</body>
</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/swiper.min.js"></script>
<script type="text/javascript" src="../script/encrypt.js"></script>
<script type="text/javascript">
  var tagCode = 'SYRM',id = '#hot',pi = 1;
  var arryHtml = []
  apiready = function () {
    var bMap = api.require('bMap');

    if (api.systemType === "ios") {

        bMap.initMapSDK(function(ret, err) {

            if (ret.status) {

                // bmpios();
            } else {
              $api.html($api.dom('.adress'), '中国');
            }
        });
    } else {

        // bmpios();
    };

    function bmpios(){
      bMap.getLocation({
          accuracy: '100m',
          autoStop: true,
          filter: 1
      }, function(ret, err) {
          if (ret.status) {

            bMap.getNameFromCoords({
              lon: ret.lon,
              lat: ret.lat
            }, function(ret, err) {

              if (ret.status) {
                  $api.html($api.dom('.adress'), ret.province);
              }
            });
          } else {
              $api.html($api.dom('.adress'), '中国');

          }
      });
    }

    $api.addEvt($api.dom('.input'), 'click', function(){//搜索页
      api.openWin({
          name: 'search',
          url: './search.html'
      });

    });

    var base = new Base64();
    var userid = $api.getStorage('userID');

    action(tagCode,id,pi) //热门列表
    // action('SYZX','#new',1) // 最新列表


    let json;
    if(userid){
      json = {userID:userid}
    }else{
      json = {userID:'00000000-0000-0000-0000-000000000000'}
    }

    let parameter = base.encode(JSON.stringify(json));
    let signValue = parameter + secretKey
    let sign = signValue.MD5(32)
    $api.post(url+'getHomeBannerList.ashx', {values:{parameter:parameter,sign:sign}}, function(ret){
      // alert($api.jsonToStr(ret.data.ParamList))
      if(ret.code == 200){
        var bannerhtml = ''
        var bannerimg = ret.data.ParamList;
        for (var i = 0; i < bannerimg.length; i++) {
          bannerhtml+='<img src="'+bannerimg[i].paraValue+'"  class="swiper-slide pic" data-url="'+bannerimg[i].homeAdvLink+'">'
        }
        $api.html($api.dom('#bannerImg'), bannerhtml);
        var imgList = $api.domAll('.pic');
          for(let i = 0,iL=imgList.length;i<iL;i++){
            imgList[i].onclick = function(){
              var link = $api.attr(imgList[i],'data-url').split(':')
              if(link[0] == 'app'){

                api.openWin({
                    name: 'index',
                    url: link[1],
                    pageParam: {
                        index: 1
                    }
                });

              }else if(link[0] == 'http' || link[0] == 'https'){
                if(api.systemType == "android"){
                      api.openApp({
                        androidPkg: 'android.intent.action.VIEW',
                        mimeType: 'text/html',
                        uri: link
                      });
                    }if(api.systemType == "ios"){
                      api.openApp({
                         iosUrl: link,
                     });
                  }
              }
            }
          }

      }
    })




    $api.addEvt($api.dom('#index1'), 'click', function(){//高薪职位
      api.openWin({
          name: 'homeList',
          url: './homeList.html',
          pageParam: {
              tagCode: 'SYGX'
          }
      });
    });

    $api.addEvt($api.dom('#index2'), 'click', function(){//当日结算
      api.openWin({
          name: 'homeList',
          url: './homeList.html',
          pageParam: {
              tagCode: 'SYDR'
          }
      });
    });

    $api.addEvt($api.dom('#index3'), 'click', function(){//极速上岗
      api.openWin({
          name: 'homeList',
          url: './homeList.html',
          pageParam: {
              tagCode: 'SYJS'
          }
      });
    });

    $api.addEvt($api.dom('#index4'), 'click', function(){//在家可做
      api.openWin({
          name: 'homeList',
          url: './homeList.html',
          pageParam: {
              tagCode: 'SYZJ'
          }
      });
    });

    api.addEventListener({
        name:'scrolltobottom',
        extra:{
            threshold:20           //设置距离底部多少距离时触发，默认值为0，数字类型
        }
    }, function(ret, err){

      if (b <20 ) {
            $api.append($api.dom(id),'<div class="nomore">没有更多了~</div>')
            api.removeEventListener({
                name: 'scrolltobottom'
            });
        } else {
            pi+=1;
            action(tagCode,id,pi)
        }
    });

    refersh()

}

  var base = new Base64();
  var index = 0;
  var b = 0
  function action(tagCode,id,pi){ //加载列表
    var pz = 20;

    var json = {'tagCode':tagCode,'pi':pi,'pz':pz}
    var parameter = base.encode(JSON.stringify(json));
    var signValue = parameter + secretKey
    var sign = signValue.MD5(32)
    $api.post(url+'getJobListByCode.ashx', {values:{parameter:parameter,sign:sign}}, function(ret){
      if(ret.code == 200){
        // alert($api.jsonToStr(ret.data))

        var html = '';
        var data = ret.data.JobList;

        b = data.length
        if(!data.length){
          b = 0
        }
        if(b>0){
          arryHtml = arryHtml.concat(data)
          for (var i = 0,iL=arryHtml.length; i < iL; i++) {
            html+='<div class="wrap" data-id="'+arryHtml[i].jianZhiID+'">'+
            '<div class="item">'+
            '<div class="title">'+arryHtml[i].listTitle+'</div>'+
            '<div class="money"><span class="redfont">'+arryHtml[i].salary+'</span>'

            if(arryHtml[i].salaryUnit == 10){ //薪水单位
              html+='元/小时</div>'
            }else if(arryHtml[i].salaryUnit == 20){
              html+='元/天</div>'
            }else if(arryHtml[i].salaryUnit == 30){
              html+='元/次</div>'
            }

            html+='</div>'+
            '<div class="item self">'

            if(arryHtml[i].sex == 10){ //性别要求
              html+='<span class="sex">仅限男</span>'
            }else if(arryHtml[i].sex == 20){
              html+='<span class="sex">仅限女</span>'

            }else if(arryHtml[i].sex == 30){
              html+='<span class="sex">男女不限</span>'
            }

            if(arryHtml[i].effective == 10){ //有效时间
              html+='<span>长期</span>'
            }

            html+='</div>'+
            '<div class="item">'+
            '<div class="target line1">'+arryHtml[i].detailContent+'</div>'

            if(arryHtml[i].paymentTerms == 10){ //结算方式
              html+='<div class="type">日结</div>'
            }else if(arryHtml[i].paymentTerms == 20){
              html+='<div class="type">周结</div>'
            }else if(arryHtml[i].paymentTerms == 30){
              html+='<div class="type">月结</div>'
            }
            html+='</div>'+
            '</div>'

          }
        }

        $api.html($api.dom(id), html);

        var wrapList = $api.domAll('.wrap');
        for (var i = 0; i < wrapList.length; i++) {
          $api.addEvt(wrapList[i], 'click', function(){
            var jianZhiID = $api.attr(this,'data-id')
            api.openWin({
              name: 'jobDetails',
              url: './jobDetails.html',
              pageParam:{
                jianZhiID:jianZhiID
              }
            });

          });
        }

      }else{
        api.toast({
          msg: ret.msg,
          duration: 2000,
          location: 'middle'
        });
      }
    })
  }

  function tagBtn(tag){

    if( tag == $api.dom('.tab span.active') )return;
    var eFootLis = $api.domAll('.tab span'),
    eHeaderLis = $api.domAll('.list'),
    index = 0;
    arryHtml = []
    api.addEventListener({
        name:'scrolltobottom',
        extra:{
            threshold:20           //设置距离底部多少距离时触发，默认值为0，数字类型
        }
    }, function(ret, err){

      if (b <20 ) {
            $api.append($api.dom(id),'<div class="nomore">没有更多了~</div>')
            api.removeEventListener({
                name: 'scrolltobottom'
            });
        } else {
            pi+=1;
            action(tagCode,id,pi)
        }
    });
    for (var i = 0,len = eFootLis.length; i < len; i++) {

      if( tag == eFootLis[i] ){
        index = i;
        if(index == 0){
          tagCode = 'SYRM'
          id = '#hot'
          pi = 1
          b=0
          action('SYRM','#hot',1)
        }else if(index == 1){
          tagCode = 'SYZX'
          id = '#new'
          b =0
          pi = 1
          action('SYZX','#new',1)
        }

      }else{
        $api.removeCls(eFootLis[i], 'active');
        $api.removeCls(eHeaderLis[i], 'active');
      }
    }
    $api.addCls( eFootLis[index], 'active');
    $api.addCls( eHeaderLis[index], 'active');
  }

    var swiper = new Swiper('#banner', {
      autoplay:true,
      pagination: {
        el: '.swiper-pagination',
      },
    });

  var swiper = new Swiper('#cow', {
    slidesPerView: 3.5,
    spaceBetween: 15,
    freeMode: true,
    centeredSlides : true,
    centeredSlidesBounds: true
  });
</script>
